import 'package:flutter/material.dart';
import 'package:flutter_app/components/Expansion.dart';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/utils/AppUtil.dart';
import 'package:flutter_app/generated/l10n.dart';

class DoubleDetailPage extends StatefulWidget {
  @override
  _DoubleDetailPageState createState() => _DoubleDetailPageState();
}

Widget SmallGreyText(String text) {
  return Text(
    text,
    style: TextStyle(color: Colors.grey, fontSize: 12),
  );
}

Widget RuleTitle(String text) {
  return Text(text,
      style: TextStyle(fontSize: 13, color: Colors.black.withOpacity(0.7)));
}

Widget RuleMiddleLine(String text) {
  return Row(
    children: [
      Expanded(
          child: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
          image: AssetImage("assets/images/ic_reinvest_signal_dotted_line.png"),
          fit: BoxFit.fitWidth,
          // repeat: ImageRepeat.repeatX
        )),
        child: Text(''),
      )),
      Container(
        padding: EdgeInsets.symmetric(vertical: 10.0),
        alignment: Alignment.center,
        child: Text(
          text,
          style: TextStyle(color: Colors.grey, fontSize: 12),
        ),
      ),
      Expanded(
          child: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
          image: AssetImage("assets/images/ic_reinvest_signal_dotted_line.png"),
          fit: BoxFit.fitWidth,
          // repeat: ImageRepeat.repeatX
        )),
        child: Text(''),
      )),
    ],
  );
}

class _DoubleDetailPageState extends State<DoubleDetailPage> {
  TextEditingController _inputControl = TextEditingController();

  void initState() {
    super.initState();
    this._inputControl.text = '1000';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(
          color: Colors.black, //修改颜色
        ),
        elevation: 0,
        actions: [
          TextButton(
              onPressed: () {},
              child: Row(
                children: [
                  Text(
                    'BTC ' + S.of(context).index,
                    style: TextStyle(color: Colors.black54, fontSize: 15),
                  ),
                  Text(
                    ' \$' + AppUtil.formatNum(46367.36, point: 2),
                    style: TextStyle(
                        color: Colors.blueAccent,
                        fontSize: 15,
                        fontWeight: FontWeight.w600),
                  ),
                  SizedBox(width: 15)
                ],
              ))
        ],
      ),
      body: Column(
        children: [
          Expanded(
              child: RefreshIndicator(
            onRefresh: () async {},
            child: SingleChildScrollView(
              child: Container(
                color: Colors.white,
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                child: ColumnStart(
                  children: [
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      'Dual Currency-BTC-U-9165',
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w600,
                          fontSize: 16),
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    ShadowContainer(
                        child: ColumnStart(children: [
                      Text(
                        // 年化收益
                        S.of(context).annualized,
                        style: TextStyle(color: Colors.grey, fontSize: 13),
                      ),
                      Row(
                        children: [
                          Text(
                            '87.6%',
                            style: TextStyle(
                                color: Colors.blueAccent,
                                fontWeight: FontWeight.bold,
                                fontSize: 22),
                          ),
                          SizedBox(width: 5),
                          TagContainer('+2%')
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      RowBetween(
                        children: [
                          Expanded(
                            child: ColumnStart(children: [
                              Text(
                                //挂钩价
                                S.of(context).linked_price,
                                style:
                                    TextStyle(color: Colors.grey, fontSize: 13),
                              ),
                              Text(
                                '\$' + AppUtil.formatNum(48000),
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 16,
                                    fontFamily: 'dinpro'),
                              )
                            ]),
                          ),
                          Expanded(
                            child: ColumnStart(children: [
                              //到期日
                              Text(S.of(context).endLine,
                                  style: TextStyle(
                                      color: Colors.grey, fontSize: 13)),
                              Text(
                                '2021-03-05',
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 16),
                              )
                            ]),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Container(
                        decoration: BoxDecoration(
                            border: Border(
                          top: BorderSide(
                            width: 1, //宽度
                            color: Colors.grey.withOpacity(0.2), //边框颜色
                          ),
                        )),
                        padding: const EdgeInsets.symmetric(vertical: 15.0),
                        child: Row(
                          children: [
                            //yield 收益率
                            TagContainer(S.of(context).yield + '：0.24%',
                                size: 11.0),
                            SizedBox(
                              width: 5,
                            ),
                            TagContainer(
                                S.of(context).s_tenor +
                                    '：1' +
                                    S.of(context).day,
                                size: 11.0),
                            SizedBox(
                              width: 5,
                            ),
                            //起投
                            TagContainer(S.of(context).min + '：80USDC/USDT',
                                size: 11.0),
                          ],
                        ),
                      )
                    ])),
                    SizedBox(
                      height: 15,
                    ),
                    //回款计算
                    Text(
                      S.of(context).settle_calculator,
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w600,
                          fontSize: 16),
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    ShadowContainer(
                        child: Row(
                      children: [
                        Expanded(
                          child: ColumnStart(
                            children: [
                              TextField(
                                decoration: InputDecoration(
                                    filled: true,
                                    focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(
                                            color: Colors.blueAccent)),
                                    //invested 投资买入
                                    suffixText:
                                        'USDC ' + S.of(context).invested,
                                    hintStyle: TextStyle(
                                        color: Colors.grey, fontSize: 15),
                                    border: OutlineInputBorder(
                                        borderSide: BorderSide.none),
                                    contentPadding: const EdgeInsets.symmetric(
                                        vertical: 0.0, horizontal: 15.0)),
                                controller: _inputControl,
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              Text(
                                '如果结算价 ≤ \$' +
                                    AppUtil.formatNum(48000) +
                                    ',到期收到',
                                style: TextStyle(
                                    fontSize: 12,
                                    fontFamily: 'dinpro',
                                    color: Colors.black54),
                              ),
                              Text('0.20883332 BTC',
                                  style: TextStyle(
                                      color: Colors.orange,
                                      fontSize: 18,
                                      fontFamily: 'dinpro',
                                      fontWeight: FontWeight.w500)),
                              SizedBox(
                                height: 10,
                              ),
                              Divider(
                                height: 1.0,
                                indent: 0.0,
                                color: Colors.grey.withOpacity(0.7),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Text(
                                '如果结算价 ≤ \$' +
                                    AppUtil.formatNum(48000) +
                                    ',到期收到',
                                style: TextStyle(
                                    fontSize: 12, color: Colors.black54),
                              ),
                              Text(AppUtil.formatNum(10024) + ' USDC',
                                  style: TextStyle(
                                    color: Colors.blueAccent,
                                    fontSize: 18,
                                    fontFamily: 'dinpro',
                                    fontWeight: FontWeight.w500,
                                  )),
                              SizedBox(
                                height: 10,
                              ),
                            ],
                          ),
                        ),
                      ],
                    )),
                    SizedBox(
                      height: 15,
                    ),
                    Expansion(
                      //rule 回款规则
                      title: S.of(context).rule,
                      child: Container(
                        width: MediaQuery.of(context).size.width - 40,
                        padding: EdgeInsets.symmetric(
                            horizontal: 10.0, vertical: 10.0),
                        decoration: BoxDecoration(
                            color: Colors.grey.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(4.0)),
                        child: ColumnStart(
                          children: [
                            //linked_price 挂钩价
                            RuleTitle('如果结算价 ≤ ' + S.of(context).linked_price),
                            Text(
                              '结算 BTC',
                              style: TextStyle(
                                  color: Colors.orange,
                                  fontSize: 15,
                                  height: 1.6),
                            ),
                            Text(
                              //linked_price 挂钩价
                              '购买数量/' + S.of(context).linked_price + '*(1+收益率)',
                              style: TextStyle(fontSize: 13, height: 1.6),
                            ),
                            //linked_price 挂钩价
                            RuleMiddleLine(
                                S.of(context).linked_price + ' \$54,000'),
                            RuleTitle('如果结算价 ＞ ' + S.of(context).linked_price),
                            Text(
                              '结算 USDC',
                              style: TextStyle(
                                  color: Colors.blueAccent,
                                  fontSize: 15,
                                  height: 1.6),
                            ),
                            Text(
                              '购买数量*(1+收益率)',
                              style: TextStyle(fontSize: 13, height: 1.6),
                            ),
                          ],
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    InkWell(
                      onTap: () {},
                      child: RowBetween(
                        children: [
                          Text(
                            //introduction 产品介绍
                            S.of(context).introduction,
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 16,
                                fontWeight: FontWeight.w500),
                          ),
                          Icon(
                            Icons.arrow_forward_ios_outlined,
                            size: 14,
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    Expansion(
                      //basic_rule 基本规则
                      title: S.of(context).basic_rule,
                      child: Container(
                        width: MediaQuery.of(context).size.width - 40,
                        child: Text(
                          '1.本金和收益到期自动转入钱包账户。2.购买成功后不可撤销，到期前不支持提前赎回。3.年化收益率=收益率/(到期日-当天) x 365。',
                          style:
                              TextStyle(color: Colors.black87.withOpacity(0.7)),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    Container(
                      alignment: Alignment.center,
                        child: SmallGreyText(S.of(context).remark_read)
                    ),
                    Center(child: SmallGreyText(S.of(context).remark_market)),
                    SizedBox(
                      height: 15,
                    ),
                  ],
                ),
              ),
            ),
          )),
          //底部的
          Container(
            color: Colors.white,
            padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    //quota_left 剩余可购
                    Text(S.of(context).quota_left + "："),
                    Text(
                      AppUtil.formatNum(114117.68, point: 2) + ' USDT',
                      style: TextStyle(
                          color: Colors.blueAccent,
                          fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.blueAccent,
                        child: FlatButton(
                            onPressed: () {
                              Navigator.pushNamed(context, '/double/buy');
                            },
                            textColor: Colors.white,
                            //购买
                            child: Text(S.of(context).buy)),
                      ),
                    ),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
